<template>
  <div class="table">
    <table border="0" cellpadding="0" cellspacing="0" class="table-header">
      <tbody>
        <slot name="table-head"> </slot>
      </tbody>
    </table>
    <vue-seamless-scroll
      :data="list"
      class="seamless-warp"
      :class-option="optionSetting" 
			v-if="step!=0">
      <slot name="table-list"></slot>
    </vue-seamless-scroll>
		<div class="seamless-warp noautoscroll" :style="{overflowY: 'auto'}" v-else><slot name="table-list"></slot></div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "tableData",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    step:{
      type:Number,
      default(){
        return 0.5
      }
    }
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    optionSetting() {
      return {
        step: this.step, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  height: 100%;
  overflow: hidden;
  padding-bottom: 5px;
  /deep/ .table-header {
    position: relative;
    width: 100%;
    margin-top: 20px;
    height: 28px;
    // padding: 0 5px;
    color: #00d1d2;
    text-align: center;
    font-size: 14px;
    &::after {
      display: block;
      content: " ";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #081e40, #00fbfc 49%,#00fbfc 62%, #081e40 100%);
    }
    &::before {
      display: block;
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #081e40, #00fbfc 49%,#00fbfc 62%, #081e40 100%);
    }
  }
  .seamless-warp {
    position: relative;
    margin-top: 10px;
    height: calc(100% - 101px);
    overflow: hidden;
    color: #fff;
    padding: 5px;
		&::-webkit-scrollbar-track-piece {
			width: 3px;
		}
		&::-webkit-scrollbar {
			width: 3px;
			height: 6px;
			background-color: transparent;
		}
		&::-webkit-scrollbar-thumb {
			height: 50px;
			background-color: #34a1e0;
			border-radius: 50px;
		}
    /deep/ .table-list {
      padding: 5px;
      text-align: center;
      .table-rwo {
        display: flex;
        position: relative;
        height: 32px;
        line-height: 32px;
        div {
          display: inline-block;
          padding: 0 2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(to right, #081e40, #00fbfc 49%,#00fbfc 62%, #081e40 100%);
        }
      }
    }
    &::after {
      display: block;
      content: " ";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #081e40, #00fbfc 49%,#00fbfc 62%, #081e40 100%);
    }
    &::before {
      display: block;
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #081e40, #00fbfc 49%,#00fbfc 62%, #081e40 100%);
    }
		&.noautoscroll::after{
			display: none;
		}
  }
}
</style>